<template>
  <div class="components-container">
    <div class="filter-container">
      <el-date-picker
        v-model="listrQuery.year"
        type="year"
        size="small"
        :clearable="false"
        :picker-options="pickerOptions"
        value-format="yyyy"
        placeholder="选择年"
        class="filter-item"
      ></el-date-picker>
      <el-select
        size="small"
        v-model="listrQuery.month"
        placeholder="月份"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option value="1" label="一月"></el-option>
        <el-option value="2" label="二月"></el-option>
        <el-option value="3" label="三月"></el-option>
        <el-option value="4" label="四月"></el-option>
        <el-option value="5" label="五月"></el-option>
        <el-option value="6" label="六月"></el-option>
        <el-option value="7" label="七月"></el-option>
        <el-option value="8" label="八月"></el-option>
        <el-option value="9" label="九月"></el-option>
        <el-option value="10" label="十月"></el-option>
        <el-option value="11" label="十一月"></el-option>
        <el-option value="12" label="十二月"></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="listrQuery.applySource"
        clearable
        placeholder="渠道"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in applySource"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="listrQuery.productName"
        clearable
        placeholder="产品"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in productName"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="listrQuery.userType"
        clearable
        placeholder="客群"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in userType"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="listrQuery.strategyVersion"
        clearable
        placeholder="策略版本"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in strategyVersion"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-button
        size="small"
        @click="handleFilter('季度')"
        type="primary"
        class="filter-item"
        ref="btnQuery"
      >
        查询
      </el-button>
      <el-button
        @click="handleReset('季度')"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
      >
        重置
      </el-button>
      <!-- <el-button
        @click="downloand"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
      >
        下载
      </el-button> -->
      <el-button
        @click="setValue"
        size="small"
        type="primary"
        class="filter-item"
      >
        设置基准数
      </el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        label="申请评分"
        prop="indicator"
        align="center"
      ></el-table-column>
      <el-table-column label="所有申请" align="left">
        <el-table-column label="基准" align="left">
          <el-table-column
            label="数量"
            prop="qtyBaseOfCredit"
            align="center"
          ></el-table-column>
          <el-table-column
            label="比例"
            prop="rateBaseOfCredit"
            align="center"
          ></el-table-column>
        </el-table-column>
        <el-table-column label="当前月" align="left">
          <el-table-column
            label="数量"
            prop="qtyActualOfCredit"
            align="center"
          ></el-table-column>
          <el-table-column
            label="比例"
            prop="rateActualOfCredit"
            align="center"
          ></el-table-column>
        </el-table-column>
        <el-table-column label="变化情况" align="left">
          <el-table-column
            label="差异[C-E]"
            prop="rateChageOfCredit"
            align="center"
          ></el-table-column>
          <el-table-column
            label="信息比重[LN(C/E)]"
            prop="infoRatioOfCredit"
            align="center"
          ></el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="被批准申请" align="left">
        <el-table-column label="基准" align="left">
          <el-table-column
            label="数量"
            prop="qtyBaseOfCreditPass"
            align="center"
          ></el-table-column>
          <el-table-column
            label="比例"
            prop="rateBaseOfCreditPass"
            align="center"
          ></el-table-column>
        </el-table-column>
        <el-table-column label="当前月" align="left">
          <el-table-column
            label="数量"
            prop="qtyAcutalOfCreditPass"
            align="center"
          ></el-table-column>
          <el-table-column
            label="比例"
            prop="rateActualOfCreditPass"
            align="center"
          ></el-table-column>
        </el-table-column>
        <el-table-column label="变化情况" align="left">
          <el-table-column
            label="差异[C-E]"
            prop="rateChageOfCreditPass"
            align="center"
          ></el-table-column>
          <el-table-column
            label="信息比重[LN(C/E)]"
            prop="infoRatioOfCreditPass"
            align="center"
          ></el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
    <el-dialog
      title="设置基准线数"
      :visible.sync="setDialog"
      :modal-append-to-body="false"
      width="500px"
      :before-close="handleClose"
    >
      <el-form :model="valForm" label-width="100px">
        <el-form-item
          v-for="(item, index) in valForm"
          :key="index"
          :label="index"
          label-position="right"
        >
          <el-input-number
            v-model="item.all"
            :controls="false"
            autocomplete="off"
            style="width:160px;"
          ></el-input-number>
          -
          <el-input-number
            v-model="item.pass"
            :controls="false"
            autocomplete="off"
            style="width:160px;"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveValue">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import {
  getApply,
  getProducts,
  getUserTypes,
  getStrategyVersions
} from '@/api/risksystem/riskMarket/search.ts'
import {
  getVal,
  saveVal,
  getScore
} from '@/api/risksystem/riskMarket/stabilityAnalysis.ts'
const defaultPage = {
  limit: 10,
  current_page: 1
}
const defaultQuery = {
  applySource: '',
  productName: '',
  userType: '',
  strategyVersion: '',
  year: String(new Date().getFullYear()),
  month: String(new Date().getMonth() + 1)
}
@Component({
  name: 'trustTrial',
  components: {
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  private listrQuery: any = Object.assign({}, defaultQuery)
  private productName = [] //产品名
  private applySource = [] //渠道
  private userType = [] //客群
  private strategyVersion = [] // 版本

  private tableData = []
  private quarterYear = String(new Date().getFullYear())
  private monthYear = String(new Date().getFullYear())
  private pickerOptions = {
    disabledDate(time: any) {
      return time.getTime() > Date.now()
    }
  }
  private valForm = {}
  private valName = 'score_stable'
  private setDialog = false
  created() {
    this.gitValue()
    this.getApplylist()
    this.getProducts()
    this.getUserTypes()
    this.getStrategyVersions()
    this.gitList()
  }
  mounted() {
    // this.getApply()
  }
  // 搜索数据源获取
  private async getApplylist() {
    const res = await getApply()
    this.applySource = res.data.applySources
  }
  private async getProducts() {
    const res = await getProducts()
    this.productName = res.data.products
  }
  private async getUserTypes() {
    const res = await getUserTypes()
    this.userType = res.data.userTypes
  }
  private async getStrategyVersions() {
    const res = await getStrategyVersions()
    this.strategyVersion = res.data.strategyVersions
  }
  // 列表获取
  private async gitList() {
    const { data } = await getScore({ search: this.listrQuery })
    this.tableData = data.rows
  }
  // 基准数获取
  private async gitValue() {
    const res: any = await getVal({ name: this.valName })
    this.valForm = res.data
    // this.listrQuery.value = this.valForm
    if (res.code === 0) {
      this.gitList()
    }
  }
  private async saveValue() {
    const res: any = await saveVal({ name: this.valName, value: this.valForm })
    if (res.code === 0) {
      this.gitList()
      this.handleClose()
    }
  }
  // 查询、重置
  private handleFilter(val: string) {
    this.listrQuery.current_page = 1
    this.gitList()
  }
  private handleReset(val: string) {
    this.listrQuery = Object.assign({}, defaultQuery)
  }
  private setValue() {
    this.setDialog = true
    this.gitValue()
  }
  private handleClose() {
    this.setDialog = false
  }
  private downloand() {
    console.log('下载')
  }
}
</script>
<style scoped>
.components-container {
  padding: 20px;
}
</style>
